import { useEffect, useRef } from "react";
import { CommonComponenetProps } from "../../interface";
import { useMaterialDrop } from "../../hooks/useMaterialDrop";
import { useDrag } from "react-dnd";

const Container = ({id, name, children, styles }: CommonComponenetProps) => {
  const divRef = useRef<HTMLDivElement>(null);

  // drag
  const [_, drag] = useDrag({
    type: "Container",
    item: {
        type: "Container",
        dragType: "move",
        id: id
    }
  })

  // 容器类的组件才接受 Drop
  const {canDrop, drop} = useMaterialDrop(["Button", "Container", "Table", "Form"], id);

  useEffect(() => {
    drag(divRef)
    drop(divRef)
  }, [])

  return (
    <div 
      data-component-id={id}
      ref= {divRef}
      className={`container border-[1px] border-[#000] min-h-[100px] p-[20px] ${ canDrop ? 'border-[2px] border-[blue]' : 'border-[1px] border-[#000]'}`}
      style={styles}
      >{children}</div>
  )
}

export default Container;